<template>
  <div>
    <div class="channel_box">
      <span>我的频道</span>
      <van-button class="van_b" plain @click="editButton">{{
        sizi ? "编辑" : "取消"
      }}</van-button>
    </div>

    <van-grid :gutter="10" class="van_gr">
      <van-grid-item v-for="(item, index) in userChannelList" :key="item.id">
        <van-icon
          v-if="index > 0"
          name="cross"
          class="van_ic"
          v-show="shows"
          @click="remove(index, item.id)"
        />

        <div class="van_itsp">
          <span @click="bothway(index)" :class="{ active: value == index }">{{
            item.name
          }}</span>
        </div>
      </van-grid-item>
    </van-grid>

    <span class="van_sp">可选频道</span>
    <van-grid :gutter="10" class="van-gr">
      <van-grid-item
        v-for="(item, index) in screenlist"
        :key="item.id"
        :text="item.name"
        @click="add(item)"
      />
    </van-grid>
  </div>
</template>

<script>
import { channelAPI, addUserchannelAPI, deleteUserchannelAPI } from "@/api";
export default {
  data() {
    return {
      channelList: [],
      shows: false,
      sizi: true,
    };
  },
  props: ["userChannelList", "show", "value"],
  async created() {
    //获取所有频道数据
    let res = await channelAPI();
    this.channelList = res.data.data.channels;
  },
  computed: {
    screenlist() {
      let res = this.channelList.filter(
        (v) => !this.userChannelList.some((val) => v.id === val.id)
      );
      return res;
    },
  },
  methods: {
    bothway(index) {
      this.show.shows = false;
      this.$emit("input", index);
    },
    async add(item) {
      //添加频道是判断用户是否登陆
      if (this.$store.state.tokenobj.token) {
        this.userChannelList.push(item);
        //筛选数据
        let channels = this.userChannelList.map((v, index) => {
          return { id: v.id, seq: index + 1 };
        });
        //将筛选的数据发送添加请求
        await addUserchannelAPI({
          channels,
        });
      } else {
        // console.log("我没有登陆");
        this.userChannelList.push(item);
        localStorage.setItem(
          "userchannel",
          JSON.stringify(this.userChannelList)
        );
      }
    },
    editButton() {
      this.shows = !this.shows;
      this.sizi = !this.sizi;
    },
    async remove(index, target) {
      if (this.$store.state.tokenobj.token) {
        if (index >= this.value) {
          await deleteUserchannelAPI({ target });
          this.userChannelList.splice(index, 1);
        } else {
          this.$emit("remo");
          this.userChannelList.splice(index, 1);
        }
      } else {
        this.userChannelList.splice(index, 1);
        localStorage.setItem("userchannel", this.userChannelList);
      }
    },
  },
};
</script>

<style scoped lang="less">
.van_act {
  z-index: 999;
}
.active {
  color: red;
}
.van_itsp {
  font-size: 14px;
}
.van_gr {
  margin: 10px auto;
  position: relative;
}
.van-gr {
  margin-top: 10px;
}
.van_sp {
  margin-left: 20px;
}
.van_ic {
  font-size: 16px;
  position: absolute;
  top: 0;
  right: 0;
}
</style>